<template>
  <el-form :class="setting.ref" ref="autoForm" :model="autoForm" :rules="autoRules" :label-width="setting.width" :inline="setting.inline" :label-position="setting.align" :id="setting.inline">
    <el-form-item v-for="(item, key) in form" :key="key" :label="item.label" :prop="chineseToPinYin(item.label)">
      <!--input-->
      <template v-if="item.type === 'input'">
          <el-input v-model="autoForm[item.module || chineseToPinYin(item.label)]" :placeholder="'请输入'+item.label" @input="handleRefresh"/>
      </template>
      <!--select-->
      <template v-if="item.type === 'select'">
        <el-select filterable v-model="autoForm[item.module || chineseToPinYin(item.label)]" :placeholder="'请选择'+item.label" @change="handleRefresh">
          <el-option v-for="(item_, key_) in item.options" :key="key+'_'+key_" :label="item_.label"
                     :value="item_.value"></el-option>
        </el-select>
      </template>
      <!--date-->
      <template v-if="item.type === 'date'">
        <el-date-picker type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'请选择'+item.label" v-model="autoForm[chineseToPinYin(item.label)]" @change="handleRefresh"></el-date-picker>
      </template>
      <!--radio-->
      <template v-if="item.type === 'radio'">
        <el-radio-group v-model="autoForm[item.module || chineseToPinYin(item.label)]" @change="handleRefresh">
          <el-radio v-for="(item_, key_) in item.options" :key="key_" :label="item_.label" :value="item_.value"></el-radio>
        </el-radio-group>
      </template>
      <!--textarea-->
      <template v-if="item.type === 'textarea'">
        <el-input type="textarea" v-model="autoForm[item.module || chineseToPinYin(item.label)]"/>
      </template>
    </el-form-item>
    <!--BUTTON--GROUP-->
    <el-form-item v-if="button">
      <el-button v-for="(item, key) in button" :key="'btn-'+key" :class="item.float" :icon="item.icon" :type="item.type" @click="handleButton(item.event, 'autoForm')">{{ item.name }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import chineseToPinYin from '@/lib/pinyin'
import mixins from './mixins'
export default {
  name: 'index',
  mixins: [mixins],
  computed: {
  },
  title: '',
  props: {
    setting: {
      type: Object,
      default: () => ({
        ref: 'form',
        width: '80px',
        align: 'left'
      })
    },
    button: {
      type: Array,
      default: () => [
        { name: '查询', event: 'search', type: 'primary', icon: 'el-icon-search' },
        { name: '重置', event: 'reset', type: 'success', icon: 'el-icon-refresh-left' }
      ]
    },
    form: {
      type: Array,
      default: () => [
        { label: '类型', type: 'select' },
        { label: '分数', type: 'input' },
        { label: '时间', type: 'date' }
      ]
    }
  },
  data () {
    return {
      autoRules: {}
    }
  },
  created () {
    this.form.forEach(item => {
      // 表单默认值
      // this.autoForm[chineseToPinYin(item.label)] = item.value || null
      // 表单验证
      this.autoRules[chineseToPinYin(item.label)] = verify(item)
    })
    function verify (item) {
      let rules = []
      if (item.required && item.type === 'input') {
        rules = [{ required: true, message: `请输入${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'select') {
        rules = [{ required: true, message: `请选择${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'textarea') {
        rules = [{ required: true, message: `请输入${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'date') {
        rules = [{ type: 'date', required: true, message: `请选择${item.label}`, trigger: ['blur', 'change'] }]
      } else if (item.required && item.type === 'radio') {
        rules = [{ required: true, message: `请选择${item.label}`, trigger: ['blur', 'change'] }]
      }
      return rules
    }
  },
  methods: {
    // 文字转拼音
    chineseToPinYin,
    handleButton (event, autoForm) {
      if (event === 'reset' || event === 'cancel') {
        this.autoForms = {}
      } else {
        this.$refs[autoForm].validate((valid) => {
          if (valid) {
            this.$emit(event, this.autoForms, this.setting.ref)
          } else {
            this.$message({
              type: 'warning',
              message: '请检查您的输入'
            })
          }
        })
      }
    },
    handleRefresh () {
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped lang="scss">
</style>
